<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="v-for-example">
			<ul >
				<li v-for="item in items" :key="item.messge" >{{item.messge}}</li>
			</ul>
			
			<ul >
				<li v-for="(item,index) in items" :key="item.messge" >{{index}}-{{item.messge}}</li>
			</ul>
			
			
			<ul >
				<li v-for="(item,index) of items" :key="item.messge" >{{index}}-{{item.messge}}</li>
			</ul>
			
			
			<!-- 对象遍历 -->
			<ul>
				<li v-for="value in object">{{value}}</li>
			</ul>
			
			<ul>
				<li v-for="(value,key) in object">{{key}} ---- {{value}}</li>
			</ul>
			
			<ul>
				<li v-for="(value,key,index) in object">{{index}}--{{key}} ---- {{value}}</li>
			</ul>
			
			
			<ul>
				<li v-for="n in eventNumbers">{{n}}</li>
			</ul>
			
			<!-- 计算属性不适用的情况下，例如嵌套v-for 循环中,你可以使用一个方法 -->
			<ul v-for="set in sets">
				<li v-for="n in even(set)">{{n}}</li>
			</ul>
			
			
			<!--  v-for 使用范围值 -->
			<div>
				<span v-for="n in 10">{{n}}</span>
			</div>
			
			<!--  2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。 -->
			
			<div>
				<span v-for="n in 10" v-bind:key="n">{{n}}</span>
			</div>
		</div>	
		<script type="text/javascript">
			let app=new Vue({
				el:'#v-for-example',
				data:{
					items:[
						{messge:'Foo'},
						{messge:'Bar'},
					],
					object:{
						title:'how to do lists in vue',
						author:'jane doe',
						publishedAt:'2016-04-10'
					},
					numbers:[1,2,3,4,5],
					sets:[[1,2,3,4,5],[6,7,8,9,10]]
				},
				methods:{
					even:function(numbers){
						return numbers.filter(function(num){
							return num%2 === 0;
						})
					}
				},
				//计算属性
				computed:{
					eventNumbers:function(){
						return this.numbers.filter(function(num){
							return num%2===0;
						})
					}
				}
			})
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
